<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix header-box">
        <span class="title">职位类别</span>
        <el-button
          style="float: right; padding: 10px 10px"
          type="primary"
          @click="addCateShowDialog"
          >新增分类</el-button
        >
      </div>
      <!-- 不加 : 后面的值是字符串 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" :span="5" label="分类名称">
        </el-table-column>
        <el-table-column prop="alias" :span="1" label="分类别名">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope"
            ><!-- 作用域插槽  scope.row 点击那一行的对象-->
            <el-button @click="edit(scope.row)" type="primary" size="small"
              >编辑</el-button
            >
            <el-button type="danger" size="small" @click="deleteCate(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- .sync作用实现双向数据绑定
会在运行时给所在标签绑定 @update:属性名的事件, 把接收到子组件内传来的值赋予给右侧Vue变量
组件内$emit('update:visible', true)
这个update: 是固定的
-->
    <el-dialog
      :title="isEdit ? '修改':'新增'"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
      @closed="onAddClosedFn"
    >
      <el-form ref="addForm" :model="cate" label-width="70px" :rules="rules">
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="cate.name"></el-input>
        </el-form-item>
        <el-form-item label="分类别名" prop="alias">
          <el-input v-model="cate.alias"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="addArt('addForm')"
          >确认</el-button
        >
        <el-button type="info" @click="reset('addForm')">重置</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 经验：如果用同一个按钮，想要做状态区分
// 1.定义一个标记变量isEdit(true编辑 false新增),还要定义本次要编辑的数据唯一id值，editID
// 2.在点击修改的时候，isEdit改为true，editId保存要修改的数据的id
// 3.在点击新增按钮的时候，isEdit改为false
// 4.在点击保存按钮时(确定按钮时),就可以用isEdit变量做区分了
import { getArtCateAPI, addArtCateAPI, updateArtCateAPI, deleteArtCateAPI } from '@/api'
export default {
  name: 'artCate',
  data () {
    return {
      tableData: [],
      centerDialogVisible: false, // 文章分类对话框
      cate: {
        id: '',
        name: '',
        alias: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          {
            pattern: /^[\u4E00-\u9FA5A-Za-z0-9_]{1,10}$/,
            message: '长度在 1 到 10 个字符',
            trigger: 'blur' // blur：表单失去焦点
          }
        ],
        alias: [
          { required: true, message: '请输入分类别名', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9]{1,15}$/,
            message: '长度在1到15的字母数字',
            trigger: 'blur'
          }
        ]
      },
      isEdit: false, // true为编辑状态 false新增状态
      editId: ''
    }
  },
  methods: {
    // 获取文章分类列表
    async getArt () {
      const { data: res } = await getArtCateAPI()
      console.log('文章列表', res)
      if (res.status !== 0) {
        return this.$message.error(res.message)
      }
      this.tableData = res.data
    },
    // 对话框确定按钮点击事件
    addArt (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.isEdit) {
            // 修改
            this.cate.id = this.editId
            const { data: res } = await updateArtCateAPI(this.cate)
            // 或者 updateArtCateAPI({ id: this.editId, ...this.cate })
            if (res.status !== 0) return this.$message.error(res.message)
            this.$message.success(res.message)
            console.log('formName', formName)
            this.$refs[formName].resetFields() // 清空表单
            console.log('修改文章分类', res)
          } else {
            // 新增
            const { data: res } = await addArtCateAPI(this.cate)
            if (res.status !== 0) return this.$message.error(res.message)
            this.$message.success(res.message)
            this.$refs[formName].resetFields() // 清空表单
            console.log('新增文章分类', res)
          }
          this.centerDialogVisible = false // 关闭dialog
          this.getArt()
        } else {
          this.$message.error('表单输入有误，请重新输入')
          return false
        }
      })
    },
    reset (formName) {
      this.$refs[formName].resetFields()
    },
    onAddClosedFn () {
      this.$refs.addForm.resetFields()
    },
    // 添加分类按钮的点击事件
    addCateShowDialog () {
      this.centerDialogVisible = true
      this.isEdit = false
      this.editId = ''
    },
    // 编辑(修改) 前置准备
    edit (obj) {
      this.isEdit = true // 编辑状态
      this.editId = obj.id
      this.centerDialogVisible = true
      // 让el-dialog第一次挂载el-form时，先用cate空字符串初始值绑定到内部，后续作为restFields重置的初始值
      // 所以让真实DOM先创建并在内部绑定好赋值好初始值

      // 接着等真实DOM更新后，再做数据回显
      // $nextTick,等待真实DOM更新后，再回来执行
      this.$nextTick(() => {
        this.cate.name = obj.name
        this.cate.alias = obj.alias
      })
      console.log(obj)
    },
    // 删除文章分类
    async deleteCate (obj) {
      const { data: res } = await deleteArtCateAPI(obj.id)
      if (res.status !== 0) return this.$message.error(res.message)
      this.$message.success(res.message)
      // 删除成功后获取文章分类列表
      this.getArt()
      console.log('删除文章分类', res)
    }
  },
  mounted () {
    this.getArt()
  }
}
// bug：进入页面时，点修改，修改完毕后点添加，添加的框里还有上次修改的信息
// vue数据改变(先执行同步所有),再去更新DOM(异步代码)
// 原因：修改时，el-form第一次挂载,因为点击修改时，cate里面被赋值了，然后它把cate里的值作为初始值，所以以后重置的时候，它一直把第一次挂载时cate的值当做初始值来重置
</script>

<style lang="less" scoped>
.title {
  user-select: none;
  font-size: 15px;
}
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
::v-deep .el-table {
  font-size: 15px;
}

</style>
